<template>
  <div class="collapseSearchBody">
    <!-- <el-divider content-position="right" @click="toggle">
      <el-icon>
        <IconifyIconOffline :icon="SearchLine" />
      </el-icon>
      {{ openFont }}
    </el-divider> -->
    <div id="collapseSlot" ref="collapseSlot">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// import SearchLine from "@iconify-icons/ri/search-line";
defineOptions({
  name: "CollapseSearch"
});
// const emit = defineEmits(["set-off-set-bottom"]);
const isOpen = ref(false);
// const openFont = ref<string>("展开搜索");
const collapseSlot = ref();
// const props = defineProps(["tableRef"]);

function toggle() {
  isOpen.value = !isOpen.value;
  // openFont.value = isOpen.value ? "关闭搜索" : "展开搜索";
  /**
   * 过渡动画
   * 参考链接：https://blog.csdn.net/qq_16992475/article/details/129786944
   */
  collapseSlot.value.style.height =
    (isOpen.value ? collapseSlot.value.scrollHeight : 0) + "px";
  // if (isOpen.value) {
  //   collapseSlot.value.style.height = collapseSlot.value.scrollHeight + "px";
  // emit("set-off-set-bottom", -collapseSlot.value.scrollHeight);
  // } else {
  //   collapseSlot.value.style.height = 0;
  // emit("set-off-set-bottom", collapseSlot.value.scrollHeight);
  // }
}
defineExpose({ toggle });
</script>

<style scoped>
.collapseSearchBody {
  background: #fff;
  padding: 0;
  overflow: hidden;
}
#collapseSlot {
  transition: height 0.3s;
  height: 0;
}
:deep(.el-divider__text) {
  height: 2.2rem;
  line-height: 2.2rem;
  border: 1px solid #ddd;
  background: #eeeeee;
  padding: 0 1rem;
  cursor: pointer;
  border-radius: 12rem;
  font-size: 1.2rem;
}
:deep(.el-divider__text.is-right) {
  right: 3rem;
}
:deep(.el-divider--horizontal) {
  margin: 1.5rem 0;
}
</style>
